<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link href="../css/mui.picker.css" rel="stylesheet" />
  <link href="../css/mui.poppicker.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
  </script>
  <style>
    .mui-content{
      border-top: 1px solid transparent;
    }
    .actDetailsBox{
      width: 100%;
      background-color: white;
    }
    .actDetailsBox>div{
      padding: 0.1rem 0.1rem 0.05rem 0.3rem;
      border-bottom: 1px solid #ccc;
      overflow: hidden;
    }
    .actDetailsBox p{
      margin-bottom: 0.02rem;
      color:black;
      font-size: 0.22rem;
    }

    .actName{
      height: 0.6rem;
      width: 90%;
      margin: 0.2rem auto 0;
      line-height: 0.6rem;
      border-radius: 0.3rem;
      text-align: center;
      background-color: #BAEA85;
      color:white;
      border: 1px black  dotted;
    }
    .storeChoose{
      width:100%;
      font-size: 0.22rem;
      text-align: center;
      overflow: hidden;
      padding: 0.25rem 3%;
      /*background-color:#F7F7F7;*/
      overflow: hidden;
    }
    .storeChoose span{
      display: inline-block;
      width: 33%;
      padding: 0.06rem 0;
      float: left;
      border: 1px solid #ccc;
      font-size: 0.2rem;
      background-color:white;
    }
    .storeChoose span:nth-child(2){
      border-right: none;
      border-left: none;
    }
    .storeChoose .default{
      background-color: #ccc;
    }

    table {
      font-size: 0.22rem;
      width: 100%;
      text-align: center;
      margin-top: 0.1rem;
    }

    table tr td {
      padding: 0.1rem 0;
      height: 0.8rem;
    }
    table,
    tbody,td div{
      text-align: center;
      font-size: 0.2rem;
    }
    td span{
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    .table-box{
      width: 100%;
      font-size: 0.2rem;
      text-align: center;
      padding-bottom: 1rem;
    }
    .tab-head {
      width: 100%;
      background-color: #FFFFFF;
      line-height: 0.5rem;
    }
    .light {
      color: #8e8a8a;
    }
    .bglight {
      background-color: #FFFFFF;
    }


    .dataHeader {
      width: 100%;
      background-color: white;
      padding: 0.2rem 0;
      overflow: hidden;
    }
    .setMeal ,.openCard{
      background-color: #F9F9F9;
      width: 48%;
      float: left;
      border-radius: 0.2rem;
      text-align: center;
      padding: 0.05rem 0 0.1rem;
    }
    .setMeal{
      margin:0 2% 0 1%;
    }
    .setMeal p ,.openCard p{
      margin: 0.05rem 0 0;
      font-size: 0.22rem;
      color:black;
    }
    .setMeal>p:first-child ,.openCard>p:first-child{
      font-size: 0.26rem;
    }
    .setMeal>p:nth-child(2) ,.openCard>p:nth-child(2){
      font-size: 0.22rem;
    }
    .floatDiv{
      width: 100%;
      padding: 0.05rem 0 ;
      overflow: hidden;
      margin-top: 0.1rem;
    }
    .floatDiv .floatItem{
      width: 50%;
      float: left;
    }
    .floatDiv>div:first-child{
      border-right: 1px solid #ccc;
    }
    .floatDiv .floatItem p{
      margin: 0 0 0.05rem 0;
    }

    .tableDiv{
      width: 100%;
      font-size: 0.22rem;
      background-color: #EEEEEE;
      padding-bottom: 1rem;
    }
    .tableItem{
      padding-top: 0.2rem;
    }
    .mealName{
      display: inline-block;
      width: 100%;
      height: 0.3rem;
      line-height: 0.32rem;
      background-color: white;
      color:#ED7D31;
      font-size: 0.2rem;
      position: absolute;
      bottom:0.05rem;
      padding-left: 0.2rem;
    }
    .triangle{
      display: inline-block;
      border-bottom: 0.3rem solid transparent;
      border-left: 0.3rem solid transparent;
      border-right: 0.3rem solid #EEEEEE;
      position: absolute;
      bottom:0.07rem;
      right: 3.8rem;
    }
    .titleData{
      width: 3.8rem;
      height: 0.3rem;
      line-height: 0.3rem;
      position: absolute;
      bottom:0.07rem;
      right: 0;
      background-color: #EEEEEE;
      text-align: right;
      font-size: 0.2rem;
    }
    .titleData span{
      display: inline-block;
      margin-right: 0.1rem;
    }
    .mealDetail{
      width: 100%;
      background-color: #F7F7F7;
      padding-top: 0.2rem;
      margin-top: 0.05rem
    }
    .mealDetail .name{
      width: 70%;
      margin: 0 auto;
      background-color: white;
      color:#ED7D31;
      text-align: center;
      padding: 0.05rem 0;
      border-radius: 0.3rem;
    }
    .bglight2{
      background-color: #F7F7F7;
    }

    .background{
      background-color: #BAEA85 ;
      display: inline-block;
      width: 100%;
      height: 0.3rem;
      line-height: 0.32rem;
      color:#ED7D31;
      font-size: 0.2rem;
      position: absolute;
      bottom:0.05rem;
      padding-left: 0.2rem;
    }


  </style>
</head>

<body>
<div id="app" class="mui-content">
  <div style="position: fixed;top:0;width: 100%;z-index: 9999">
    <p class="actName">{{actDetail.actName}}</p>
    <div class="storeChoose">
      <span @click="choose(1)" :class="{default:chooseType ===1}" >活动详情</span>
      <span @click="choose(2)" :class="{default:chooseType ===2}" >活动销售报告</span>
      <span @click="choose(3)" :class="{default:chooseType ===3}" >吧台套餐排行</span>
    </div>
  </div>
  <div style="padding-top: 1.8rem">
    <!--活动详情数据-->
    <div v-show="chooseType ===1">
      <!--活动详情-->
      <div class="actDetailsBox">
        <div>
          <p>{{actType === 1 ? '会员卡.首充活动' : actType === 2 ? '会员卡.充值活动' : actType === 3 ? '会员卡.赠送活动' : '暂无'}}</p>
        </div>
        <div>
          <p>有效期：{{actDetail.tfValidit}}</p>
          <p style="float: left">活动时间：{{actDetail.actDate}}</p>
          <p style="float: right;margin-right: 0.1rem">{{actDetail.yzxDay}}</p>
        </div>
        <div>
          <p>适用玩家：{{actDetail.cardName}}</p>
          <p>参与限制：{{actDetail.limitType ===0 ? '无限制' : actDetail.limitType ===1 ? '终身一次' : actDetail.limitType ===2 ? '每天一次' :'' }}</p>
        </div>
        <div style="border-bottom: none;padding-bottom: 0.1rem">
          <p>
            人次限制：{{actDetail.limitTotalTimes === -1 ? '无限制'  :(actDetail.limitTotalTimes)+'人次'  }}
          </p>
        </div>
      </div>
      <!--活动套餐列表-->
      <div class="table-box" style="padding-bottom: 0">
        <table style="width: 100%">
          <tr class="tab-head ">
            <td style="width:20%">活动项目</td>
            <td style="width:20%" class="light">售价</td>
            <td style="width:35%" class="light">包含福利</td>
            <td style="width:25%" class="light">适用卡</td>
          </tr>
          <tr v-for="(item,index) in actDetail.actDatas" :key="index"  :class="{bglight:index%2===1}">
            <td  style="width:20%;position: relative">
                <img style="width: 0.2rem; position:absolute;top:0.36rem;left: 0.05rem " src="../images/liping.png" alt="">
                <span style="display: inline-block;width: 1.6rem;font-size: 0.2rem;padding-left: 0.3rem">{{item.dataName}}</span>
            </td>
            <td style="width:20%" class="light"> <span> {{(item.dataAmount/100).toFixed(2)}}</span></td>
            <td style="width:35%" class="light">{{item.coinNum ? item.coinNum : 0}}枚游戏币，{{item.scoreNum ? item.scoreNum : 0 }}积分，{{item.diamondCount ? item.diamondCount:0}}钻石</td>
            <td style="width:25%" class="light">{{item.cardName}}</td>
          </tr>
        </table>
        <!--<p v-show="totalData.stores.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">-->
        <!--暂无数据-->
        <!--</p>-->
      </div>
    </div>
    <!--活动销售报告-->
    <div v-show="chooseType ===2">
      <!---->
      <div v-show="Number(actState) !==1">
        <div class="dataHeader">
          <div class="setMeal">
            <p> <strong>活动销售额</strong> </p>
            <p>{{ (actReport.actTotalAmonut/100).toFixed(2)}}</p>
            <div class="floatDiv">
              <div class="floatItem">
                <p>门店总销售额</p>
                <p>{{(actReport.storeTotalAmonut/100).toFixed(2)}}</p>
              </div>
              <div class="floatItem">
                <p>活动权重</p>
                <p>{{(actReport.actWeight*100).toFixed(2)}}%</p>
              </div>
            </div>
          </div>
          <div class="openCard">
            <p> <strong>活动ARPPU</strong></p>
            <p ><strong>{{(actReport.actArppu/100).toFixed(2)}}</strong></p>
            <div class="floatDiv">
              <div class="floatItem">
                <p>购买人数</p>
                <p>{{actReport.peopleNum}}人</p>
              </div>
              <div class="floatItem">
                <p>销售笔数</p>
                <p>{{actReport.salesNum}}人</p>
              </div>
            </div>
          </div>
        </div>
        <!---->
        <div style="width: 100%;background-color: white;margin-top: 0.1rem">
          <!--每日销量  总销量 选项卡-->
          <div class="storeChoose" >
            <div style="width: 100%;margin:0 17% ;overflow: hidden;">
              <span @click="choose2(1)" :class="{default:chooseType2 ===1}" >每日销量</span>
              <span @click="choose2(2)" :class="{default:chooseType2 ===2}" style="border:1px solid #ccc" >总销量</span>
            </div>
          </div>
          <!--每日销量-->
          <div v-show="chooseType2===1">
            <!--每日销量图-->
            <div style="overflow: hidden;margin-top: 0.1rem">
              <div id="mealranking" style="width: 6.4rem;height:5rem;"></div>
            </div>
            <div class="table-box" style="padding-bottom: 1rem">
              <table style="width: 100%;background-color: #f7f7f7">
                <tr class="tab-head ">
                  <td style="width:15%">日期</td>
                  <td style="width:15%" class="light">参与人数</td>
                  <td style="width:15%" class="light">销售笔数</td>
                  <td style="width:15%" >活动销售</td>
                  <td style="width:15%" >本店销售</td>
                  <td style="width:20%" >本店ARPPU</td>
                </tr>
                <tr v-for="(item,index) in actReport.daySales" :key="index"  :class="{bglight:index%2===1}" >
                  <td style="width:15%;line-height: 0.6rem">{{  (item.dateNo+'').replace(/^(\d{4})(\d{2})(\d{2})$/, '$2'+'月'+'$3'+'日')}}</td>
                  <td style="width:15%;line-height: 0.6rem" class="light">{{item.peopleNum}}</td>
                  <td style="width:15%;line-height: 0.6rem" class="light">{{item.salesNum}}</td>
                  <td style="width:15%;line-height: 0.6rem" >{{(item.actSales/100).toFixed(2)}}</td>
                  <td style="width:15%;line-height: 0.6rem" >{{(item.storeSales/100).toFixed(2)}}</td>
                  <td style="width:20%;line-height: 0.6rem" >{{(item.storeArppu/100).toFixed(2)}}</td>
                </tr>
              </table>
              <p v-show="actReport.daySales.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
               暂无数据
              </p>
            </div>
          </div>
          <!--总销量-->
          <div v-show="chooseType2===2">
            <!--总销量图-->
            <div style="background-color: white;overflow: hidden;margin-top: 0.1rem">
              <div id="mealProportion" style="width: 6.4rem;height:5rem;"></div>
            </div>
            <div class="table-box" style="padding-bottom: 0">
              <table style="width: 100%">
                <tr class="tab-head ">
                  <td style="width:20%">活动项目</td>
                  <td style="width:20%" class="light">售价</td>
                  <td style="width:20%" class="light">参与人数</td>
                  <td style="width:20%" class="light">销售笔数</td>
                  <td style="width:20%" >销售额</td>
                </tr>
                <tr v-for="(item,index) in actReport.totalSales" :key="index"  :class="{bglight2:index%2===0}" >
                  <td style="width:20%;line-height: 0.6rem">{{item.actName}}</td>
                  <td style="width:20%;line-height: 0.6rem" class="light">{{(item.actAmount/100).toFixed(2)}}</td>
                  <td style="width:20%;line-height: 0.6rem" class="light">{{item.peopleNum}}</td>
                  <td style="width:20%;line-height: 0.6rem" class="light">{{item.biNum}}</td>
                  <td style="width:20%;line-height: 0.6rem" >{{(item.totalAmount/100).toFixed(2)}}</td>
                </tr>
              </table>
              <p v-show="actReport.totalSales.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.5rem;padding-bottom: 2rem">
              暂无数据
              </p>
            </div>
          </div>
        </div>
      </div>

      <div v-show="Number(actState) ===1">
        <p style="width: 100%;font-size: 0.26rem;text-align: center;height: 2rem;line-height: 2rem">活动尚未开始</p>
      </div>



    </div>

    <!--吧台套餐排行-->
    <div v-show="chooseType ===3">
      <div v-show="Number(actState) !==1">
        <div class="dataHeader">
          <div class="setMeal">
            <p> <strong>基本套餐</strong> </p>
            <p  style="margin: 0;font-size: 0.22rem"><strong>{{(barRankingList.basicAmount/100).toFixed(2)}}</strong></p>
            <!--单位元-->
            <p style="margin: 0">ARPPU:{{(barRankingList.basicArppu/100).toFixed(2)}}</p>
            <div class="floatDiv">
              <div class="floatItem">
                <p>购买人数</p>
                <p>{{barRankingList.basicPeopleNum}}人</p>
              </div>
              <div class="floatItem">
                <p>销售笔数</p>
                <p>{{barRankingList.basicNum}}笔</p>
              </div>
            </div>
          </div>
          <div class="openCard">
            <p> <strong>活动套餐</strong> </p>
            <p style="margin: 0;font-size: 0.22rem"><strong>{{(barRankingList.actAmount/100).toFixed(2)}}</strong></p>
            <p style="margin: 0">ARPPU:{{(barRankingList.actArppu/100).toFixed(2)}}</p>
            <div class="floatDiv">
              <div class="floatItem">
                <p>购买人数</p>
                <p>{{barRankingList.actPeopleNum}}人</p>
              </div>
              <div class="floatItem">
                <p>销售笔数</p>
                <p>{{barRankingList.actNum}}笔</p>
              </div>
            </div>
          </div>
        </div>
        <!--图-->
        <div>
          <!--套餐排行图-->
          <div v-show="chooseType2 ===1" style="background-color: white;overflow: hidden;margin-top: 0.1rem">
            <div id="barMeal" style="width: 6.4rem;height:5rem;"></div>
          </div>
          <!--table-->
          <div class="tableDiv">
            <div class="tableItem"  v-for=" (item,index) in barRankingList.actProjcts" >
              <div style="position: relative;height: 0.5rem">
                <span :class=" index === 0 ? 'background' :'mealName'"> {{item.actName}}</span>
                <!--三角形-->
                <span class="triangle"></span>
                <div class="titleData">
                  <span>{{item.totalPeopleNum}}人</span>
                  <span>{{item.totalNum}}笔</span>
                  <span>{{(item.totalAmount/100).toFixed(2)}}</span>
                </div>
              </div>
              <div class="table-box" style="padding-bottom: 0">
                <table style="width: 100%;margin-top: 0">
                  <tr class="tab-head ">
                    <td style="width:20%">商品项目</td>
                    <td style="width:20%" class="light">售价</td>
                    <td style="width:20%" class="light">购买人数</td>
                    <td style="width:20%" class="light">销售笔数</td>
                    <td style="width:20%" >销售额</td>
                  </tr>
                  <!--:class="{bglight:index%2===1}"-->
                  <tr  v-for="(item2,index2) in item.barActs" :class="{bglight:index2%2===1}">
                    <td style="width:20%;position: relative;">

                        <img style="width:15%; position:absolute;top:0.26rem;left: 0.02rem " src="../images/liping.png" alt="">
                        <span style="display: inline-block;width: 1.6rem;font-size: 0.2rem;padding-left: 0.3rem">{{item2.dataName}}</span>

                    </td>

                    <td style="width:20%;line-height: 0.6rem" class="light">{{(item2.amount/100).toFixed(2)}}</td>
                    <td style="width:20%;line-height: 0.6rem" class="light">{{item2.peopleNum}}</td>
                    <td style="width:20%;line-height: 0.6rem" class="light">{{item2.num}}</td>
                    <td style="width:20%;line-height: 0.6rem">{{(item2.saleAmount/100).toFixed(2)}}</td>
                  </tr>
                </table>
                <!--<p v-show="totalData.stores.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">-->
                <!--暂无数据-->
                <!--</p>-->
              </div>
            </div >

          </div>
        </div>
      </div>
      <div v-show="Number(actState) ===1">
        <p style="width: 100%;font-size: 0.26rem;text-align: center;height: 2rem;line-height: 2rem">活动尚未开始</p>
      </div>
    </div>
  </div>




</div>
<script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../common/timeCheck.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../config.js"></script>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: '#app',
    data: function() {
      return{
        storeName:'',
        storeId:'',
        fromDate:'',
        toDate:'',
        dateType:'',
        actnum:'',
        actType:'',
        actId:'',
        actState:'',
        currentShopObj:'',
        chooseType:1,   //1.活动详情 2.活动销售报告 3.吧台套餐排行
        chooseType2:1,   //1.每日销量  2.总销量
        dataList:[
          {
            time:'12月1日',
            open:1,
            close:2,
            money:100,
          },
          {
            time:'12月1日',
            open:1,
            close:2,
            money:100,

          },
        ],   //销售总览列表
        // 每日销量图
        mealOptions: {
          title: {
            subtext: '每日销售额',
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12
            },
          },
          legend: {
//            itemWidth:10,
//            itemHeight:10,
            bottom:10,
            data:['总销售额','活动销售额'],
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            left: '2%',
            right: '5%',
            bottom: '14%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: {
            data: [],
            splitLine:{
              show:false,
            },
            axisLabel: {
              interval:0,
              rotate:40,
              fontSize:10
            },
            textStyle: {
              color: '#ED7D31',
              fontSize: '8px'
            }
          },
          yAxis:[
            {
              name:'销售额',
              type:'value',
              max:50,
              splitLine: {
                show:true,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#B9B9B9'],
                  type:'dotted'
                }
              },
            },

          ],
          series: [{
            name: '总销售额',
            type: 'bar',
            data: [40,40],
            itemStyle:{
              normal:{color:"#DC9470"},
            }
          },{
            name: '活动销售额',
            type: 'bar',
            data: [4,4],
            itemStyle:{
              normal:{color:"#E0645D"},
            }
          }]
        },
        // 总销量图
        proportionOptions:{
          title:{
            subtext:'活动套餐权重',
            x:'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            triggeron: 'click',
            position: [10, 10],
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            bottom:0,
            left: 'center',
            data: ['基本套餐', '销售活动', '销售活动1', '销售活动2', '销售活动3', '销售活动4', '销售活动5', '销售活动6', '销售活动7', '销售活动8'],
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 10
            }
          },
          color: ['#4472C4',"#ED7D31",'#547b95','#c23531',' #BAEA85','#37A2DA','#8dcaea','#2f4554','#b1c6ca','#de7e7b' ],
          series: [{
            name: '销售额',
            type: 'pie',
            selectedOffset: 5,
            radius: '60%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 0,
                name: '基本套餐',
              },
              {
                value: 0,
                name: '销售活动'
              },
              {
                value: 0,
                name: '销售活动1'
              },
              {
                value: 0,
                name: '销售活动2'
              },
              {
                value: 0,
                name: '销售活动3'
              },
              {
                value: 0,
                name: '销售活动4'
              },{
                value: 0,
                name: '销售活动5'
              },{
                value: 0,
                name: '销售活动6'
              },{
                value: 0,
                name: '销售活动7'
              },{
                value: 0,
                name: '销售活动8'
              },


            ],
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        //吧台套餐销售图
        barMealOptions: {
          title: {
            subtext: '吧台套餐销售排行',
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12
            },
          },
          legend: {
//            itemWidth:10,
//            itemHeight:10,
            bottom:10,
            data:['套餐','人数'],
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            left: '2%',
            right: '5%',
            bottom: '14%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: {
            data: [],
            splitLine:{
              show:false,
            },
            axisLabel: {
              interval:0,
              rotate:40,
              fontSize:10
            },
            textStyle: {
              color: '#ED7D31',
              fontSize: '8px'
            }
          },
          yAxis:[
            {
              name:'销售额',
              type:'value',
              max:100,
              splitLine: {
                show:false,
//                lineStyle: {
//                  // 使用深浅的间隔色  
//                  color: ['#4472C4'],
//                  type:'dotted'
//                }
              },
            },
            {
              name:'人数',
              type:'value',
              max:10,
              splitLine: {
                show:true,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#B9B9B9'],
                  type:'dotted'
                }
              },
            }
          ],
          series: [{
            name: '套餐',
            type: 'bar',
            yAxis: 1,
            data: [40,40],
            itemStyle:{
              normal:{color:"#DC9470"},
            }
          },{
            name: '人数',
            type: 'line',
            yAxisIndex: 1,
            data: [4,4],
            itemStyle:{
              normal:{color:"#749F83"},
            }
          }]
        },
        actDetail:{
          actDatas:[
            {
              "dataId":2,
              "dataName":"88元套餐",
              "dataAmount":8800,
              "coinNum":112,
              "scoreNum":100,
              "diamondCount":0,
              "dataCards":"26,27,28",
              "actCardNo":[
                "26",
                "27",
                "28"
              ]
            },
          ]
        },   //活动详情
        cardList:[],   //所以卡的信息
        barRankingList: {
          actProjcts: [ {
            "actId"
              :
              2,
            "actType"
              :
              2,
            "actName"
              :
              "会员日超值套餐",
            "totalPeopleNum"
              :
              66,
            "totalNum"
              :
              116,
            "totalAmount"
              :
              1050800,
            "barActs"
              :
              [
                {
                  "dataId": 2,
                  "dataName": "88元()",
                  "amount": 8800,
                  "peopleNum": 56,
                  "num": 91,
                  "saleAmount": 800800
                },
                {
                  "dataId": 3,
                  "dataName": "100元(会员日专用)",
                  "amount": 10000,
                  "peopleNum": 17,
                  "num": 25,
                  "saleAmount": 250000
                }
              ]
          }]
        },   //吧台套餐排行
        actReport:{
          "actTotalAmonut":1050800,
          "storeTotalAmonut":64758400,
          "actWeight":0,
          "actArppu":15921,
          "peopleNum":66,
          "salesNum":116,
          "histograms":[
            {
              "dateNo":20190123,
              "totalAmount":0,
              "actAmount":1050800
            }
          ],
          "daySales":[
            {
              "dateNo":20190123,
              "peopleNum":66,
              "salesNum":116,
              "actSales":1050800,
              "storeSales":0,
              "storeArppu":15921
            },
            {
              "dateNo":20190123,
              "peopleNum":66,
              "salesNum":116,
              "actSales":1050800,
              "storeSales":0,
              "storeArppu":15921
            },
          ],
          "totalSales":[
            {
              "actName":"88元套餐",
              "actAmount":8800,
              "peopleNum":56,
              "biNum":91,
              "totalAmount":800800
            },
            {
              "actName":"100元套餐",
              "actAmount":10000,
              "peopleNum":17,
              "biNum":25,
              "totalAmount":250000
            }
          ]
        },  //活动销售报告

      }
    },
    mounted: function() {
      var vm = this;
      mui.plusReady(function() {
        vm.receiveParams();
        vm.initCharts();
        vm.getCardList()
      });
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId;
        this.storeName = sf.storeName;
        this.fromDate = sf.fromDate;
        this.toDate = sf.toDate;
        this.dateType = sf.dateType;
        this.actnum = sf.actnum;
        this.actType = sf.actType;
        this.actId = sf.actId;
        this.actState = sf.actState;
      },
      choose:function(type){
        if(type !== this.chooseType){
          this.chooseType=type;
          vm.initCharts()
        }
      },
      choose2:function(type){
        if(type !== this.chooseType2){
          this.chooseType2=type;
          vm.initCharts()
        }
      },
      initCharts: function() {
        var vm = this;
          var mealRanking = echarts.init(document.getElementById('mealranking'))
          mealRanking.setOption(vm.mealOptions,true)
          var mealProportion = echarts.init(document.getElementById('mealProportion'))
          mealProportion.setOption(vm.proportionOptions,true)
          var barMeal = echarts.init(document.getElementById('barMeal'))
          barMeal.setOption(vm.barMealOptions,true)
      },
      //获取活动详情
      loadData:function(){
        var vm=this;
        var data={
          "storeId":vm.storeId,
          "actType":vm.actType,
          "actId":vm.actId,
        }
        console.log(JSON.stringify(data))
        config.ajax({
          url:'/act/getActDatas',
          data:{
            "storeId":vm.storeId,
            "actType":vm.actType,
            "actId":vm.actId,
          },
          success: function(res){
            console.log(JSON.stringify(res))
            if(res.result ===1){
              vm.actDetail=res.actRechargeVo;
              vm.actDetail.cardName=vm.getCardName(vm.actDetail.actCardNo);
              vm.actDetail.actDatas.forEach(function(item,index){
                item.cardName=vm.getCardName(item.actCardNo);
              })
              vm.getActRepost();
              vm.getBarRanking()
            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      //活动销售报告
      getActRepost:function(){
        var vm=this;
        var data={
          "storeId":vm.storeId,
          "actType":vm.actType,
          "actId":vm.actId,
          "startTime":vm.actDetail.startTime,
          "endTime":vm.actDetail.endTime,
        }
//        console.log(JSON.stringify(data))
        config.ajax({
          url:'/act/getSalesReport',
          data:{
            "storeId":vm.storeId,
            "actType":vm.actType,
            "actId":vm.actId,
            "startTime":vm.actDetail.startTime,
            "endTime":vm.actDetail.endTime,
          },
          success: function(res){
//            console.log(JSON.stringify(res))
            if(res.result ===1){
              vm.actReport=res.oneActTypeAmount;
              var moneyMax=10, max=0;
              vm.mealOptions.xAxis.data=[],vm.mealOptions.series[1].data=[],vm.mealOptions.series[0].data=[];
              vm.actReport.histograms.forEach(function(item,index){
                vm.mealOptions.xAxis.data.push((item.dateNo+'').replace(/^(\d{4})(\d{2})(\d{2})$/, '$2'+'月'+'$3'+'日'));
                vm.mealOptions.series[0].data.push((item.totalAmount/100).toFixed(2));
                vm.mealOptions.series[1].data.push((item.actAmount/100).toFixed(2));
                if( Number(item.totalAmount/100)> moneyMax){
                  moneyMax= Number(item.totalAmount/100)
                }
                if( Number(item.actAmount/100)> max){
                  max= Number(item.actAmount/100)
                }
              })
              vm.mealOptions.yAxis[0].max=moneyMax > max ? moneyMax : max;

              if(vm.actReport.histograms.length < 13){
                vm.mealOptions.series[0].barWidth=17;
                vm.mealOptions.series[1].barWidth=17;
              }
              vm.proportionOptions.series[0].data=[],vm.proportionOptions.legend.data=[];
              if(vm.actReport.totalSales.length < 10){
                vm.actReport.totalSales.forEach(function(item,index){
                  vm.proportionOptions.legend.data.push(item.actName);
                  vm.proportionOptions.series[0].data.push({
                    name:item.actName,
                    value:(item.actAmount/100).toFixed(2)
                  });
                })
              }else{
                var  data=vm.actReport.totalSales;
                var name='其他套餐', otherData=0;
                for(var i=0;i<9;i++){
                  vm.proportionOptions.legend.data.push(data[i].actName);
                  vm.proportionOptions.series[0].data.push({
                    name:data[i].actName,
                    value:(data[i].actAmount/100).toFixed(2)
                  });
                };
                for(var i=9;i<vm.actReport.totalSales.length;i++){
                  otherData +=data[i].actAmount
                };
                vm.proportionOptions.legend.data.push(name);
                vm.proportionOptions.series[0].data.push({
                  name:name,
                  value:(otherData/100).toFixed(2)
                });
              }
            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      //吧台套餐排行
      getBarRanking:function(){
        var  vm=this;
//        var  data={
//          "storeId":vm.storeId,
//          "startTime":vm.actDetail.startTime,
//          "endTime":vm.actDetail.endTime,
//          actId:vm.actDetail.actId,
//          "actType":vm.actType,
//        };
//        console.log(JSON.stringify(data))
        config.ajax({
          url:'/act/getBarMealSale',
          data:{
            "storeId":vm.storeId,
            "startTime":vm.actDetail.startTime,
            "endTime":vm.actDetail.endTime,
            actId:vm.actDetail.actId,
            "actType":vm.actType,
          },
          success: function(res){
            console.log(JSON.stringify(res))
            if(res.result ===1){
              vm.barRankingList=res.barMealSaleVo;
              var peopleMax=5,moneyMax=0;
              vm.barMealOptions.series[0].data=[],vm.barMealOptions.series[1].data=[],vm.barMealOptions.xAxis.data=[];
              res.barMealSaleVo.ranking.forEach(function(item,index){
                vm.barMealOptions.series[0].data.push( (item.totalAmount/100).toFixed(2));
                vm.barMealOptions.series[1].data.push( item.peopleNum);
                vm.barMealOptions.xAxis.data.push( item.mealName);
                if(item.totalAmount/100  >moneyMax ){
                  moneyMax=item.totalAmount/100
                };
                if(item.peopleNum > peopleMax){
                  peopleMax=item.peopleNum
                }
              })
              vm.barMealOptions.yAxis[0].max=moneyMax;
              vm.barMealOptions.yAxis[1].max=peopleMax;

              if(res.barMealSaleVo.ranking.length < 13){
                vm.barMealOptions.series[0].barWidth=15;
              }

            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      //获取门店所以卡信息
      getCardList:function(){
        var vm=this;
        config.ajax({
          url:'/activity/getRewardCardGrade',
          data:{
            "storeId":vm.storeId,
          },
          success: function(res){
            if(res.result ===1){
              vm.cardList=res.cardName
              vm.loadData()
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      //cardID转化cardName
      getCardName:function(cardList){
        var  vm=this;
        var nameObj='';
        cardList.forEach(function(item,index){
          vm.cardList.forEach(function(item2,index2){
            if( Number(item) === Number(item2.cardGradeId) ){
              nameObj += (item2.vipCardName+',')
            }
          })
        });
        return nameObj
      },

    },
    watch: {

    }
  });
</script>
</body>

</html>